<template>
  <navigator
    url="/pages/category/index"
    open-type="switchTab"
    hover-class="navigator-hover"
    class="category-item-more"
  >
    <view class="image-wrapper">
      <u-image
        width="100%"
        height="320rpx"
        :src="props.src"
        shape="square"
        border-radius="20rpx"
        mode="aspectFill"
      >
        <template #loading>
          <u-loading></u-loading>
        </template>
        <template #error>
          <view style="font-size: 24rpx">加载失败</view>
        </template>
      </u-image>
      <view class="mask">
        <view class="mask-content">
          <u-icon
            name="more-dot-fill"
            size="40"
            color="#ffffff"
          ></u-icon>
          <text class="mask-text">{{ props.title }}</text>
        </view>
      </view>
    </view>
  </navigator>
</template>

<script setup>
  const props = defineProps({
    src: {
      type: String,
      default: '/static/image/more.jpg',
    },
    title: {
      type: String,
      default: '更多',
    },
  });
</script>

<style scoped lang="scss">
  .category-item-more {
    position: relative;
    width: 100%;
    height: 320rpx;
    overflow: hidden;
    border-radius: 20rpx;

    .image-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(4rpx);
      -webkit-backdrop-filter: blur(4rpx);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      border-radius: 20rpx;
      pointer-events: none;

      .mask-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16rpx;

        .mask-text {
          color: #ffffff;
          font-size: 32rpx;
          font-weight: 500;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }
      }
    }

    .navigator-hover {
      opacity: 0.8;
    }
  }
</style>
